<!-- 检测者列表 -->
<div class="layuimini-container">
	
		<div class="layuimini-main" style="margin: 10px;padding:10px;">
			<form class="layui-form" action="">

				<div class="layui-inline">
					<label class="layui-form-label"> 姓名 </label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" name="name" placeholder="请输入" />
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label"> 电话号码 </label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" name="phone" placeholder="请输入" />
					</div>
				</div>
				
				
				<div class="layui-inline">
					<label class="layui-form-label"> 所属总店</label>
					<div class="layui-input-inline">
						<select name="mainStore" id="mainStore" lay-filter="mainStore">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
					
				<div class="layui-inline">
					<label class="layui-form-label"> 所属分店</label>
					<div class="layui-input-inline">
						<select name="subStore" id="subStore" lay-filter="subStore">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
					
				<!-- 搜索按钮 -->
				<div class="layui-inline">
					<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn-a"><i class="fa fa-search"></i> 查询 </button>
					<button type="submit" id="reset" class="layui-btn layui-btn-normal"><i class="fa fa-refresh"></i> 重置 </button>
				</div>

			</form>
		</div>
		
		
		<div class="layuimini-main" style="margin: 10px;padding:10px;">
			<!-- 表格：数据表格 -->
			<table class="layui-hide" id="detectionIndex" lay-filter="detectionIndexFilter"></table>
		</div>
		
		
		<!-- 筛选周期 -->
		<!-- <div class="layuimini-main" style="margin: 10px;padding:10px;">
			
			<form class="layui-form" action="">
				
				<div class="layui-inline">
					<label class="layui-form-label"> 筛选周期 </label>
					<div class="layui-input-inline">
						<select name="period" lay-filter="period">
							<option value="">近七天</option>
							<option value="">近七天</option>
							<option value="">近七天</option>
						</select>
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label"> 查询指标 </label>
					<div class="layui-input-inline">
						<select name="queryKPI" lay-filter="queryKPI">
							<option value="">全部</option>
						</select>
					</div>
				</div>
				
				<div class="layui-inline">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i class="fa fa-search"></i> 查询 </button>
					<button class="layui-btn layui-btn-normal"><i class="fa fa-bar-chart"></i> 导出报表 </button>
				</div>
				
			</form>
		</div> -->
		
		<!-- 图形报表 -->
		<!-- <div class="layuimini-main" style="margin: 10px;padding:10px;">
			<h2 align="center">空腹血糖</h2>
			<hr/>
			<div>
				&nbsp;
			</div>
		</div> -->

</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();
		
		//对table进行初始化
		table.render({
			elem: '#detectionIndex', 
			url: 'http://localhost:8004/sccPatient', 
			cols: [
				[ //字段，表头
					{type: 'numbers',title: '序号',width:50},
					{field: 'name',title: '姓名'},
					{field: 'sex',title: '性别',
						templet: function(d) {
							if (d.sex == 1) {
								return '男'
							} else {
								return '女'
							}
						}
					},
					{field: 'age',title: '年龄'},
					{field: 'mainStoreName',title: '所属总店'},
					{field: 'subbranchStoreName',title: '所属分店' },
					{field: 'idCard',title: '身份证号码', sort: true, minWidth: 320},
					{field: 'phone',title: '电话号码', sort: true}
				]
			],
			page: true, //是否显示分页插件
			limits: [10, 20, 30], //定义每页显示多少条记录
			limit: 10, //默认每页 显示15条
			skin: 'line'
		});
		// 监听搜索操作
		form.on('submit(data-search-btn-a)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			// data.field.parentCode=localStorage.getItem('parentCode');
			// data.preventDefult();
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			//执行搜索重载
			table.reload('detectionIndex', {
				page: { curr: 1 },//当前行是第一行
				where: { data: result }//搜索条件
			}, 'data');
			return false;
		});
		
		form.on('select(mainStore)',function(data){
			var str=document.getElementById("mainStore").value;
			if(str!=""){
				$.ajax({
					url:'http://localhost:8004/sccPatient/subStore',
					type:'get',
					async:false,
					data:{"mainStoreCode":str},
					success:function(result){
						var data=result.data;
						var subStore=document.getElementById("subStore");
						for (var i = 0; i < data.length; i++) {
							var option=document.createElement("option");
							option.setAttribute("value",data[i].storeCode);
							option.innerText=data[i].storeName;
							subStore.appendChild(option);
						}
						form.render("select");
					}
				});
			}
		});
		
		layer.ready(function(){
			$.ajax({
				url:'http://localhost:8004/sccPatient/mainStore',
				type:'get',
				async:false,
				success:function(result){
					var data=result.data;
					var mainStore=document.getElementById("mainStore");
					for (var i = 0; i < data.length; i++) {
						var option=document.createElement("option");
						option.setAttribute("value",data[i].storeCode);
						option.innerText=data[i].storeName;
						mainStore.appendChild(option);
					}
					form.render("select");
				}
			});
		});
		

	});
</script>
